<template>
  <article v-for="i in 10" :key="i">
    <section>
      <h3>{{ articleList[0].title }}</h3>
      <p>{{ articleList[0].description }}</p>
    </section>
    <aside>
      <span class="time">{{ articleList[0].time }}</span>
      <span class=""></span>
    </aside>
  </article>
</template>

<script lang="ts">
export default {
  props: { articleList: Array },
};
</script>

<style lang="scss" scoped>
article {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.22);
  padding: 4px 22px 12px 22px;
  cursor: pointer;
  section {
    h3 {
      text-align: center;
      font-size: 1.175rem;
    }
    p {
      text-indent: 2em;
    }
  }
}
article + article {
  margin-top: 20px;
}
article:hover {
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.22);
  section {
    h3 {
      color: #175199;
    }
    p {
      color: rgb(73, 73, 73);
    }
  }
  aside {
    color: rgb(73, 73, 73);
  }
}
</style>